<template>
  <div style="width: 100%; height: 100%;overflow: hidden">
    <el-form label-width="80px" label-position="right">
      <el-tabs>
        <el-tab-pane label="基本属性">
          <el-row :gutter="8">
            <el-col :span="12">
              <el-form-item label="excel模板">
                <el-input v-model="excelTemplate.excelPath" placeholder="excel模板绝对地址">
                  <el-upload
                      slot="append"
                      :action="uploadUrl"
                      :headers="uploadHeader"
                      :on-success="uploadSuccess"
                      :show-file-list="false"
                  >
                    <el-button size="small" type="primary" icon="el-icon-upload" style="color: #409EFF">excel模板上传</el-button>
                  </el-upload>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="docx模板">
                <el-input v-model="excelTemplate.docxPath" placeholder="excel模板绝对地址">
                  <el-upload
                      slot="append"
                      :action="uploadUrl"
                      :headers="uploadHeader"
                      :on-success="uploadSuccess"
                      :show-file-list="false"
                  >
                    <el-button size="small" type="primary" icon="el-icon-upload" style="color: #409EFF">docx模板上传</el-button>
                  </el-upload>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item style="text-align: center;margin-bottom: 0">
            <template v-if="excelTemplate.excelId">
              <el-button type="success" :loading="loading" @click="init">初始化表头</el-button>
              <el-button type="warning" :loading="loading" @click="saveSheet">更新工作页</el-button>
            </template>
          </el-form-item>
          <el-form-item v-if="excelTemplate.excelId && excelTemplate.excelId !== '0'" label-width="0px" style="width: 100%;margin-bottom: 0">
            <el-row :gutter="4">
              <el-col :span="10">
                <excel-sheet-table ref="sheetRef" @rowClick="sheetClick" />
              </el-col>
              <el-col v-if="excelSheet.sheetId" :span="14">
                <excel-column-table ref="columnRef" :excel-sheet="excelSheet"></excel-column-table>
              </el-col>
            </el-row>
          </el-form-item>
        </el-tab-pane>
        <template v-if="excelTemplate.sheets && excelTemplate.sheets.length > 0">
          <el-tab-pane label="输出配置" name="out" lazy>
            <el-row :gutter="8">
              <el-col :span="6">
                <excel-out-table ref="outRef" :excel-id="excelTemplate.excelId" @rowClick="outClick" />
              </el-col>
              <el-col v-if="excelTemplate.excelOut && excelTemplate.excelOut.outId" :span="18">
                <el-tabs>
                  <el-tab-pane label="查询配置" lazy>
                    <excel-filter-table ref="filterRef"  @refreshOut="()=> {$refs.outRef.loadSource()}"/>
                  </el-tab-pane>
                  <el-tab-pane label="前置查询" lazy>
                    <excel-out-before ref="beforeRef"  @refreshOut="()=> {$refs.outRef.loadSource()}" />
                  </el-tab-pane>
                  <el-tab-pane label="辅助查询" lazy>
                    <excel-query-table ref="queryRef"></excel-query-table>
                  </el-tab-pane>
                  <el-tab-pane label="关联配置" lazy>
                    <excel-join-table ref="joinRef" />
                  </el-tab-pane>
                  <el-tab-pane label="计算配置" lazy>
                    <excel-compute-table ref="computeRef" />
                  </el-tab-pane>
                  <el-tab-pane label="报告配置" lazy>
                    <excel-docx-table ref="docxRef" />
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
          </el-tab-pane>
<!--          <el-tab-pane label="报告配置" name="report" lazy>
            <excel-docx-table />
          </el-tab-pane>-->
        </template>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>

import CodeEditor from "@/components/codeEditor/CodeEditor";
import ExcelOutTable from "@/views/bl/ExcelOutTable";
import ExcelComputeTable from "@/views/bl/ExcelComputeTable";
import ExcelFilterTable from "@/views/bl/ExcelFilterTable";
import ExcelSheetTable from "@/views/bl/ExcelSheetTable";
import ExcelColumnTable from "@/views/bl/ExcelColumnTable";
import ExcelJoinTable from "@/views/bl/ExcelJoinTable";
import ExcelQueryTable from "@/views/bl/ExcelQueryTable";
import ExcelDocxTable from "@/views/bl/ExcelDocxTable";
import ExcelOutBefore from "@/views/bl/ExcelOutBefore.vue";
export default {
  name: "ExcelTemplate",
  props: {
    excelTemplate: {
      type: Object,
      default: function () {
        return { sheets: [], excelOut: {} }
      }
    }
  },
  components: {
    ExcelOutBefore,
    ExcelDocxTable,
    ExcelQueryTable,
    ExcelJoinTable,
    ExcelColumnTable, ExcelSheetTable, ExcelFilterTable, ExcelComputeTable, ExcelOutTable, CodeEditor},
  provide() {
    return {
      excelTemplate: this.excelTemplate
    }
  },
  data() {
    return {
      loading: true,
      excelSheet: {}
    }
  },
  computed: {
    uploadUrl () {
      return this.$Util.mergeUrl(process.env.VUE_APP_BASE_API, '/excelTemplate/upload/' + this.excelTemplate.excelId)
    },
    uploadHeader(){
      return { Authorization: 'Bearer ' + this.$AuthStorage.getAccessToken() }
    }
  },
  created() {
    this.$set(this.excelTemplate, 'sheets', [])
    this.$set(this.excelTemplate, 'excelOut', {})
    this.loadSource()
  },
  methods: {
    uploadSuccess (response) {
      this.$resultMsg(this, response)
      if (response.code === 200) {
        this.loading = true
        this.$get('/excelTemplate/get/' +  this.excelTemplate.excelId)
            .then(res => {
              if (res.code === 200 && res.data) {
                this.$Util.copyAttr(res.data, this.excelTemplate, null, this)
              }
              this.loading = false
            })
      }
    },
    loadSource() {
      this.loading = false
    },
    init() {
      const $sheetRef = this.$refs.sheetRef
      let selectSheetId = ''
      if ($sheetRef) {
        const { selectRowIds } = $sheetRef
        if (selectRowIds.length > 0) {
          selectSheetId = selectRowIds.join('@')
        }
      }
      this.loading = true
      this.$get('excelTemplate/init/' + this.excelTemplate.excelId + "?sheetId=" + selectSheetId)
          .then(res => {
            this.$resultMsg(this, res)
            if (res.code === 200) {
              if ($sheetRef) {
                $sheetRef.loadSource()
              }
              const $columnRef = this.$refs.columnRef
              if ($columnRef) {
                $columnRef.loadSource()
              }
            }
            this.loading = false
          })
    },
    sheetClick(row) {
      if (this.excelSheet.sheetId !== row.sheetId) {
        this.$Util.cleanObj(this, this.excelSheet)
        this.$Util.copyAttr(row, this.excelSheet,null, this)
        const $columnRef = this.$refs.columnRef
        if ($columnRef) {
          $columnRef.addFilter({ field: 'sheetId', op: '=', value: this.excelSheet.sheetId})
          $columnRef.loadSource()
        }
      }
    },
    outClick(out) {
      if (out.outId === this.excelTemplate.excelOut.outId) {
        return
      }
      this.$Util.cleanObj(this, this.excelTemplate.excelOut, null)
      this.$Util.copyAttr(out, this.excelTemplate.excelOut, null, this)
      const $compute = this.$refs.computeRef
      const $filterRef = this.$refs.filterRef
      const $beforeRef = this.$refs.beforeRef
      const $joinRef = this.$refs.joinRef
      const $queryRef = this.$refs.queryRef
      const $docxRef = this.$refs.docxRef
      const filter = { field: 'outId', op: '=', value: this.excelTemplate.excelOut.outId}
      if ($compute) {
        $compute.addFilter(filter)
        $compute.loadSource()
      }
      if ($filterRef) {
        $filterRef.addFilter(filter)
        $filterRef.apdateRef(true)
        $filterRef.loadSource()
      }
      if ($beforeRef) {
        $beforeRef.apdateRef(true)
      }
      if ($joinRef) {
        $joinRef.addFilter(filter)
        $joinRef.loadSource()
      }
      if ($queryRef) {
        $queryRef.addFilter(filter)
        $queryRef.loadSource()
      }
      if ($docxRef) {
        $docxRef.addFilter(filter)
        $docxRef.loadSource()
      }
    },
    saveSheet() {
      const $sheetRef = this.$refs.sheetRef
      if ($sheetRef) {
        this.$post('excelSheet/saves', $sheetRef.dataSource)
            .then(res => {
              this.$resultMsg(this, res)
              if (res.code === 200) {
                $sheetRef.loadSource()
              }
            })
      }
    }
  }
}
</script>

<style scoped>

</style>
